<template>
	<m-layout2 title="身份认证">
		<view class="information" v-if="!userinfo.idcard">
			<view class="header flex-column flex-center">
				<m-icon type="idcard" :size="[326, 265]"></m-icon>
				<view class="title plr-200 ta-center ptb-24">
					<text class="ta-center fs28 plr-16">完成身份认证，可核实真实身份，保障合法权益</text>
				</view>
			</view>
			<view class="from mlr-24">
				<view class="from-item flex-between">
					<text>国籍：</text>
					<radio-group @change="chang" class="radiobox">
						<label v-for="item in radioGroup" :key="item">
							<radio :value="item" :checked="item==activeRadio" />{{item}}
						</label>
					</radio-group>
				</view>
				<view class="from-item flex-between">
					<text>姓名：</text>
					<input type="text" v-model="truename" placeholder="请如实填写真实姓名" placeholder-class="placeholder" />
				</view>
				<!-- 	<view class="from-item flex-between">
					<text>联系方式：</text>
					<input type="text" v-model="phone" placeholder="请输入联系方式" placeholder-class="placeholder">
				</view> -->
				<view class="from-item flex-between">
					<text>身份证号：</text>
					<input type="text" v-model="idcard" placeholder="请如实填写真实身份证号码" placeholder-class="placeholder" />
				</view>
			</view>
			<!-- <view class="hint">
				<text>实名认证说明</text>
				<text>1、请如实填写身份证号和姓名</text>
			</view> -->
			<view class="footer"><m-button @click="SetUserIdCar" :loading="isLoading">提交</m-button></view>
		</view>
		<view class="certified" v-else>
			<view class="head"><m-icon :size="[300,300]" type="certified-yes"></m-icon></view>
			<view class="main">
				<view class="head-tag"><text>已认证信息</text></view>
				<view class="h1">用户姓名：{{ userinfo.truename }}</view>
				<view class="h1">身份证号：{{ userinfo.idcard }}</view>
			</view>
		</view>
	</m-layout2>
</template>

<script>
	import { BindIdcard } from '@/api/Users.js';
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				activeRadio: '中国',
				radioGroup: ['中国', '其他'],
				isLoading: false,
				truename: '',
				type:1,
				idcard: '',
				phone: '',
				payNeed: '0.01'
			};
		},
		watch: {},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo,
				systemInfo: state => state.general.systemInfo
			})
		},
		async onShow() {},
		methods: {
			chang(e) {
				if (e.detail.value == '中国') this.type= 1
				if (e.detail.value == '其他') this.type = 0
			},
			async SetUserIdCar() {
				if (!this.truename) return this.Toast('请输入真实姓名');
				// if (!this.phone) return this.Toast('请输入联系方式')
				if (!this.idcard) return this.Toast('请输入身份证号');
				try {
					this.isLoading = true;
					const params = {
						type:this.type,
						truename: this.truename,
						idcard: this.idcard
					};
					const { success, data, msg } = await BindIdcard(params);
					this.Toast(msg)
					this.isLoading = false;
					if (success) {
						// // #ifdef APP-PLUS
						// this.openURL({
						// 	openUrl: data
						// });
						// // #endif
						// // #ifdef H5
						// window.open(data)
						// // #endif
					}
				} catch (e) {
					console.log(e);
				}
			}
		}
	};
</script>

<style lang="scss">
	.information {
		.header {
			padding: 35rpx 0;

			.title {
				padding-top: 28rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}

		.from {
			padding: 15rpx 36rpx 0;
			background: #fff;
			border-radius: 12rpx;

			.from-item {
				padding: 27rpx 0;

				&>text {
					display: block;
					flex: 3;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				input {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333;
					flex: 7;
				}

				.placeholder {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}

				view {
					flex: 7;

					text {
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
					}

					text:nth-of-type(1) {
						color: #fa2b47;
					}
				}
			}

			.from-item+.from-item {
				border-top: 1rpx solid #eeeeee;
			}
		}

		.hint {
			padding: 58rpx 24rpx;

			text {
				padding-bottom: 15rpx;
				display: inline-block;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}

			text:nth-of-type(1) {
				padding-bottom: 20rpx;
				font-size: 28rpx;
			}
		}

		.footer {
			margin-top: 60rpx;
			padding: 40rpx 24rpx;
		}
	}

	.certified {
		padding: 24rpx 50rpx;

		.head {
			text-align: center;
			padding: 80rpx 0;
		}

		.main {
			background: #f8f3cf;
			border-radius: 20rpx;
			padding: 30rpx;
			position: relative;

			.head-tag {
				height: 56rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #ffffff;

				text {
					position: absolute;
					left: 0;
					top: 0;
					background-color: var(--theme);
					border-top-left-radius: 20rpx;
					border-bottom-right-radius: 20rpx;
					display: inline-block;
					text-align: center;
					padding: 10rpx 30rpx;
					// background: url('../../../static/images/pages/mine/repay-left.png') no-repeat;
					background-size: 100% 100%;
				}
			}

			.h1 {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}

			.h1+.h1 {
				padding-top: 14rpx;
			}
		}
	}
	.radiobox{
		::v-deep .uni-label-pointer{
			margin-left: 24rpx !important;
			font-size: 28rpx !important;
		}
		::v-deep .uni-radio-input{
			width: 30rpx !important;
			height: 30rpx !important;
		}
	}
</style>